new pinpad component

7 files changed, 74 insertions, 114 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 40c73ea4..1cf525a0 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -4,8 +4,11 @@
 
 	export let data;
 	let { events, subject, user } = data;
+	let v;
 </script>
 
 <div class="flex justify-center lg:justify-start">
-	<Balance {user} />
+	{#if user?.id === subject.id}
+		<Balance {user} />
+	{/if}
 </div>
diff --git a/src/routes/(app)/[username]/(profile)/messages/+page.svelte b/src/routes/(app)/[username]/(profile)/messages/+page.svelte
index 00960534..db7b1ced 100644
--- a/src/routes/(app)/[username]/(profile)/messages/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/messages/+page.svelte
@@ -5,7 +5,7 @@
 	import { scale } from 'svelte/transition';
 	import { enhance } from '$app/forms';
 	import { Icon } from '$comp';
-	import { back, failure, focus } from '$lib/utils';
+	import { back, fail, focus } from '$lib/utils';
 	import { sign, send, encrypt, decrypt } from '$lib/nostr';
 	import { messages, password } from '$lib/store';
 	import { tick, onMount } from 'svelte';
@@ -64,7 +64,7 @@
 
 			sent = true;
 		} catch (e) {
-			failure('Failed to send message');
+			fail('Failed to send message');
 			delete $messages[user.pubkey][subject.pubkey][event.id];
 			$messages = $messages;
 		}
diff --git a/src/routes/(app)/[username]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte
index d136943e..499034e6 100644
--- a/src/routes/(app)/[username]/dashboard/+page.svelte
+++ b/src/routes/(app)/[username]/dashboard/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { enhance } from '$app/forms';
-	import { f, s, post, failure, sat, sats } from '$lib/utils';
+	import { f, s, post, fail, sat, sats } from '$lib/utils';
 	import { tick } from 'svelte';
 	import { Avatar, Icon } from '$comp';
 	import { rate, password, selectedRate } from '$lib/store';
diff --git a/src/routes/(app)/[username]/generate/+page.svelte b/src/routes/(app)/[username]/generate/+page.svelte
index 6336062a..bd72592f 100644
--- a/src/routes/(app)/[username]/generate/+page.svelte
+++ b/src/routes/(app)/[username]/generate/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { failure, post, wait } from '$lib/utils';
+	import { fail, post, wait } from '$lib/utils';
 	import { Buffer } from 'buffer';
 	import { onMount } from 'svelte';
 	import { bech32m } from 'bech32';
@@ -41,9 +41,9 @@
 		} catch (e) {
 			$pin = '';
 			if (e.message?.startsWith('Pin')) {
-				failure('Wrong pin, try again');
+				fail('Wrong pin, try again');
 			} else {
-				failure('Failed to generate keys');
+				fail('Failed to generate keys');
 				goto('/');
 			}
 		}
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
index 1e8b31ce..5638a22b 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
@@ -5,7 +5,7 @@
 
 	import { Icon, Spinner, Pin } from '$comp';
 	import { t } from '$lib/translations';
-	import { failure, post, success } from '$lib/utils';
+	import { fail, post, success } from '$lib/utils';
 	import { avatar, banner, password, pin } from '$lib/store';
 	import { upload } from '$lib/upload';
 	import { page } from '$app/stores';
@@ -34,7 +34,7 @@
 	$: form?.success && success('Settings saved!');
 
 	$: if (form?.message?.startsWith('Pin')) {
-		failure('Wrong pin, try again');
+		fail('Wrong pin, try again');
 		$pin = '';
 	}
 
@@ -98,7 +98,7 @@
 			applyAction(result);
 		} catch (e) {
 			console.log(e);
-			failure('Something went wrong');
+			fail('Something went wrong');
 		}
 
 		loading = false;
@@ -109,7 +109,7 @@
 </script>
 
 {#if loaded && user.haspin && $pin?.length !== 6}
-	<Pin />
+	<Pin bind:value={$pin} />
 {/if}
 
 <form
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
index 94dc8c88..472f4d07 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { Icon, LocaleSelector, Toggle } from '$comp';
 	import { t } from '$lib/translations';
-	import { success, failure } from '$lib/utils';
+	import { success, fail } from '$lib/utils';
 	import { page } from '$app/stores';
 
 	export let user, rates;
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
index cf969f1c..eb3b405e 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
@@ -1,80 +1,52 @@
 <script>
 	import { tick } from 'svelte';
 	import { t } from '$lib/translations';
-	import { Icon, Qr } from '$comp';
-	import { Pincode, PincodeInput } from 'svelte-pincode';
-	import { post, success, failure } from '$lib/utils';
+	import { Pin, Icon, Qr } from '$comp';
+	import { post, success, fail } from '$lib/utils';
 	import { pin as current } from '$lib/store';
 	import { invalidate } from '$app/navigation';
 	import { page } from '$app/stores';
 
 	export let user, submit;
-	let settingPin, setting2fa, disabling2fa;
+	let pin, verify;
+	let settingPin, setting2fa, disabling2fa, confirming2fa;
 
 	let password, revealPassword;
 	let token = '';
-	let pinCode = [];
-	let verifyCode = [];
-	let tokenInput, pinInput, verifyInput;
-	let verifying = false;
 	let old;
 
 	let togglePassword = () => (revealPassword = !revealPassword);
 
-	let startVerifying = () => {
-		if (pinCode.join('').length < 6) return;
-		verifying = true;
-	};
-
-	$: pin = pinCode.join('');
-
 	let otp;
-	$: pinChange($current);
-	let pinChange = async (pin) => {
-		try {
-			otp = await post('/otpsecret', { pin });
-		} catch (e) {
-			console.log(e);
-		}
-	};
 
 	let locked;
-	$: verifyCode.join('').length > 5 && checkPin();
+	$: verifying = pin?.length > 5;
+	$: verify && checkPin(pin);
 	let checkPin = async () => {
 		old = $current;
-		if (locked) return;
-		locked = true;
-
-		let verify = verifyCode.join('');
-
-		pinCode = ['', '', '', '', '', ''];
-		verifyCode = ['', '', '', '', '', ''];
-		settingPin = false;
 
 		try {
 			if (pin.length > 5 && pin === verify) {
 				user.haspin = true;
 				$current = pin;
+				pin = '';
+				verify = '';
 				submit.click();
+				settingPin = false;
+				verifying = false;
 			} else {
-				failure('Pin mismatch, try again');
+				fail('Pin mismatch, try again');
+				pin = '';
+				verify = '';
+				verifying = false;
 				settingPin = true;
-				pinInput.focusFirstInput();
 			}
 		} catch (e) {
-			failure('Problem setting PIN');
+			console.log(e);
+			fail('Problem setting PIN');
 		}
-
-		verifying = false;
-
-		await new Promise((r) => setTimeout(r, 500));
-		locked = false;
 	};
 
-	$: if (verifying) verifyInput && tick().then(verifyInput.focusFirstInput);
-	$: if (settingPin) pinInput && tick().then(pinInput.focusFirstInput);
-	$: if (setting2fa || disabling2fa) tokenInput && tick().then(tokenInput?.focusFirstInput);
-
 	let reset = () => {
 		token = '';
 		return true;
@@ -88,15 +60,35 @@
 				submit.click();
 			} catch (e) {
 				console.log(e);
-				failure('Failed to disable pin');
+				fail('Failed to disable pin');
 			}
 		} else {
 			settingPin = true;
 		}
 	};
 
-	let toggleEnabling = () => reset() && (setting2fa = !setting2fa);
-	let toggleDisabling = () => reset() && (disabling2fa = !disabling2fa);
+	let startEnabling2fa = async () => {
+		reset();
+		try {
+			if (!otp) otp = await post('/otpsecret', { pin: $current });
+		} catch (e) {
+			console.log(e);
+		}
+
+		setting2fa = true;
+	};
+
+	let startDisabling2fa = () => (disabling2fa = true);
+	let startConfirming2fa = () => (confirming2fa = true);
+	let cancel = () => {
+		pin = null;
+		token = null;
+		verifying = false;
+		settingPin = false;
+		setting2fa = false;
+		confirming2fa = false;
+		disabling2fa = false;
+	};
 
 	$: enable2fa(token);
 	let enable2fa = async (twoFa) => {
@@ -105,10 +97,10 @@
 				await post('/enable2fa', { token });
 				success('2FA enabled');
 				user.twofa = 1;
-				toggleEnabling();
+				cancel();
 			}
 		} catch (e) {
-			failure('Failed to enable 2FA, try again');
+			fail('Failed to enable 2FA, try again');
 		}
 	};
 
@@ -118,12 +110,12 @@
 			if (disabling2fa && token.length === 6) {
 				await post('/disable2fa', { token });
 				success('2FA disabled');
-				user.twofa = 0;
-				toggleDisabling();
+				delete user.twofa;
+				disabling2fa = false;
 			}
 		} catch (e) {
 			console.log(e);
-			failure('Failed to disable 2FA, try again');
+			fail('Failed to disable 2FA, try again');
 		}
 	};
 </script>
@@ -155,31 +147,10 @@
 	<p class="text-secondary mb-1">
 		{$t('user.settings.securityPINDescription')}
 	</p>
-	{#if settingPin}
-		<div class="flex my-4">
-			<div class="mx-auto">
-				<div class:hidden={verifying}>
-					<Pincode on:complete={startVerifying} bind:code={pinCode} bind:this={pinInput}>
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-					</Pincode>
-				</div>
-				<div class:hidden={!verifying}>
-					<Pincode bind:code={verifyCode} bind:this={verifyInput}>
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-					</Pincode>
-				</div>
-			</div>
-		</div>
+	{#if verifying}
+		<Pin bind:value={verify} {cancel} />
+	{:else if settingPin}
+		<Pin bind:value={pin} title={$t('user.settings.setPIN')} {cancel} />
 	{:else}
 		<button type="button" class="primary" on:click={togglePin}
 			><Icon icon="lock" style="mr-1" />
@@ -193,6 +164,7 @@
 	<p class="text-secondary mb-4">
 		{$t('user.settings.twofaDescription')}
 	</p>
+
 	{#if setting2fa}
 		<a href={otp.uri}>
 			<Qr src={otp.qr} />
@@ -203,40 +175,25 @@
 			<b>{otp.secret}</b>
 		</div>
 
-		<div class="text-center my-4">
-			{$t('user.settings.oneTimeCode')}<br />
-			<Pincode bind:value={token} bind:this={tokenInput}>
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-			</Pincode>
-		</div>
-	{:else if disabling2fa}
-		<div class="text-center my-4">
-			{$t('user.settings.oneTimeCode')}<br />
-			<Pincode bind:value={token} bind:this={tokenInput}>
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-			</Pincode>
-		</div>
+		<button type="button" class="primary" on:click={startConfirming2fa}>
+			<Icon icon="mobile" style="mr-1" />
+			Confirm
+		</button>
 	{:else if user.twofa}
-		<button type="button" class="primary" on:click={toggleDisabling}>
+		<button type="button" class="primary" on:click={startDisabling2fa}>
 			<Icon icon="mobile" style="mr-1" />
 			{$t('user.settings.twofaDisable')}
 		</button>
 	{:else}
-		<button type="button" class="primary" on:click={toggleEnabling}>
+		<button type="button" class="primary" on:click={startEnabling2fa}>
 			<Icon icon="mobile" style="mr-1" />
 			{$t('user.settings.twofaSetup')}
 		</button>
 	{/if}
+
+	{#if confirming2fa || disabling2fa}
+		<Pin bind:value={token} title="Enter 2FA Code" {cancel} />
+	{/if}
 </div>
 
 <div>